Skill
অ্যাজাক্স (Ajax)

Ajax এর মাধ্যমে GET এবং POST Request (GET এবং POST Request Handling with Ajax)

Web Development - অ্যাজাক্স (Ajax) - NCTB BOOK
Please, contribute to add content into Ajax এর মাধ্যমে GET এবং POST Request (GET এবং POST Request Handling with Ajax).
Content

GET Request এর মাধ্যমে ডেটা রিকোয়েস্ট করা

Ajax এর মাধ্যমে GET রিকোয়েস্ট ব্যবহার করে ডেটা রিকোয়েস্ট করার একটি সাধারণ পদ্ধতি হলো XMLHttpRequest অবজেক্ট ব্যবহার করা। GET রিকোয়েস্ট সাধারণত সার্ভার থেকে ডেটা ফেচ বা আনার জন্য ব্যবহৃত হয় এবং এটি সহজ ও কার্যকর। নিচে একটি পূর্ণাঙ্গ উদাহরণ এবং এর ধাপে ধাপে ব্যাখ্যা দেওয়া হলো:

উদাহরণ: GET Request এর মাধ্যমে ডেটা রিকোয়েস্ট করা

HTML (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GET Request Example</title>
</head>
<body>
    <h1>Fetch Data Using GET Request</h1>
    <button onclick="fetchData()">Fetch Data</button>
    <div id="data-container">
        <!-- GET রিকোয়েস্টের মাধ্যমে প্রাপ্ত ডেটা এখানে দেখানো হবে -->
    </div>

    <script src="app.js"></script>
</body>
</html>

বিস্তারিত ব্যাখ্যা:

  • একটি HTML পেজ তৈরি করা হয়েছে যেখানে একটি শিরোনাম (<h1>), একটি বোতাম (<button>), এবং একটি <div> এলিমেন্ট রয়েছে।
  • "Fetch Data" বোতামে ক্লিক করলে fetchData() ফাংশন কল হবে, যা GET রিকোয়েস্ট করবে।
  • data-container নামে একটি <div> এলিমেন্ট রয়েছে, যেখানে Ajax GET রিকোয়েস্টের মাধ্যমে প্রাপ্ত ডেটা ডায়নামিকভাবে দেখানো হবে।

JavaScript (app.js):

function fetchData() {
    // XMLHttpRequest অবজেক্ট তৈরি করা
    var xhr = new XMLHttpRequest();
    
    // GET রিকোয়েস্ট ওপেন করা
    xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);
    
    // রেসপন্স হ্যান্ডলিং সেট করা
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) { // রিকোয়েস্ট সম্পূর্ণ হয়েছে কিনা তা চেক করা
            if (xhr.status === 200) { // রিকোয়েস্ট সফল হয়েছে কিনা তা চেক করা
                var data = JSON.parse(xhr.responseText); // JSON ডেটা প্রসেস করা
                document.getElementById("data-container").innerHTML = `
                    <h2>${data.title}</h2>
                    <p>${data.body}</p>
                `;
            } else {
                // যদি এরর হয়, তাহলে এরর মেসেজ দেখানো
                document.getElementById("data-container").innerHTML = "Error fetching data!";
            }
        }
    };
    
    // রিকোয়েস্ট পাঠানো
    xhr.send();
}

বিস্তারিত ব্যাখ্যা:

১. XMLHttpRequest অবজেক্ট তৈরি করা:

  • fetchData() ফাংশনে একটি XMLHttpRequest অবজেক্ট তৈরি করা হয়েছে, যা GET রিকোয়েস্ট পরিচালনা করবে।

২. রিকোয়েস্ট ওপেন করা:

  • xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true); মেথড ব্যবহার করে একটি GET রিকোয়েস্ট সেটআপ করা হয়েছে।
  • "GET" মেথড ব্যবহার করা হয়েছে, যা সার্ভার থেকে ডেটা আনার জন্য ব্যবহৃত হয়।
  • "https://jsonplaceholder.typicode.com/posts/1" URL থেকে ডেটা ফেচ করা হবে। এটি একটি ডেমো API যা JSON ডেটা প্রদান করে।
  • true মানে রিকোয়েস্টটি অ্যাসিনক্রোনাসভাবে চালানো হবে।

৩. রেসপন্স হ্যান্ডলিং:

  • xhr.onreadystatechange ইভেন্ট হ্যান্ডলার ব্যবহার করে চেক করা হয়েছে যে রিকোয়েস্ট সম্পূর্ণ হয়েছে কিনা (xhr.readyState === 4) এবং সফল হয়েছে কিনা (xhr.status === 200)।
  • যদি রিকোয়েস্ট সফল হয়, তাহলে JSON ডেটা পার্স করে HTML ডকুমেন্টে (data-container ডিভে) আপডেট করা হয়েছে।
  • যদি রিকোয়েস্ট ব্যর্থ হয়, তাহলে একটি এরর মেসেজ দেখানো হয়েছে।

৪. রিকোয়েস্ট পাঠানো:

  • xhr.send(); মেথড ব্যবহার করে রিকোয়েস্টটি সার্ভারে পাঠানো হয়েছে।

সার্ভার রেসপন্স:

এই উদাহরণে, আমরা একটি JSONPlaceholder API ব্যবহার করেছি যা নিচের মতো JSON ডেটা প্রদান করে:

{
    "userId": 1,
    "id": 1,
    "title": "Sample Title",
    "body": "This is a sample body text."
}

প্রোগ্রামটি কীভাবে কাজ করে:

  1. ইউজার যখন "Fetch Data" বোতামটি ক্লিক করে, তখন fetchData() ফাংশন কল হয়।
  2. ফাংশনটি একটি GET রিকোয়েস্ট পাঠায় এবং সার্ভার থেকে JSON ডেটা রিসিভ করে।
  3. রেসপন্স পাওয়ার পর, ডেটা HTML পেজে ইনজেক্ট করা হয়, ফলে ইউজার পেজ রিফ্রেশ ছাড়াই সেই ডেটা দেখতে পারে।

সারসংক্ষেপ:

  • GET রিকোয়েস্ট: Ajax এর মাধ্যমে সার্ভারে GET রিকোয়েস্ট পাঠিয়ে ডেটা ফেচ করা হয়।
  • অ্যাসিনক্রোনাস অপারেশন: Ajax GET রিকোয়েস্ট অ্যাসিনক্রোনাসভাবে কাজ করে, ফলে পেজ প্রতিক্রিয়াশীল থাকে এবং রেসপন্স পাওয়ার পর HTML ডায়নামিকভাবে আপডেট হয়।
  • রেসপন্স হ্যান্ডলিং: readyState এবং status চেক করে রিকোয়েস্ট সফল হলে ডেটা প্রসেস এবং DOM আপডেট করা হয়।

এই ধাপগুলো অনুসরণ করে আপনি সহজেই Ajax GET রিকোয়েস্ট ব্যবহার করে সার্ভার থেকে ডেটা ফেচ করতে পারেন এবং আপনার ওয়েব পেজে ডায়নামিক কন্টেন্ট আপডেট করতে পারেন।

POST Request এর মাধ্যমে ডেটা পাঠানো

Ajax এর মাধ্যমে POST রিকোয়েস্ট ব্যবহার করে ডেটা পাঠানো হয় যখন ক্লায়েন্ট থেকে সার্ভারে ডেটা সাবমিট বা আপডেট করতে হয়। POST রিকোয়েস্ট সাধারণত ফর্ম ডেটা, JSON ডেটা, বা অন্য কোনো কাস্টম ডেটা সার্ভারে পাঠানোর জন্য ব্যবহৃত হয়। এটি GET রিকোয়েস্টের তুলনায় বেশি নিরাপদ, কারণ ডেটা URL এর পরিবর্তে রিকোয়েস্টের বডিতে পাঠানো হয়। নিচে POST রিকোয়েস্টের মাধ্যমে ডেটা পাঠানোর একটি পূর্ণাঙ্গ উদাহরণ এবং এর ব্যাখ্যা দেওয়া হলো:

উদাহরণ: POST Request এর মাধ্যমে ডেটা পাঠানো

HTML (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>POST Request Example</title>
</head>
<body>
    <h1>Send Data Using POST Request</h1>
    <form id="data-form">
        <input type="text" id="title" placeholder="Title" required />
        <textarea id="body" placeholder="Body" required></textarea>
        <button type="button" onclick="sendData()">Submit</button>
    </form>
    <div id="response-container">
        <!-- সার্ভার রেসপন্স এখানে দেখানো হবে -->
    </div>

    <script src="app.js"></script>
</body>
</html>

বিস্তারিত ব্যাখ্যা:

  • এখানে একটি HTML ফাইল তৈরি করা হয়েছে যেখানে একটি শিরোনাম (<h1>), একটি ফর্ম (<form>), এবং একটি <div> এলিমেন্ট রয়েছে।
  • ফর্মটিতে দুটি ইনপুট ফিল্ড (<input> এবং <textarea>) রয়েছে যেখানে ইউজার ডেটা প্রবেশ করতে পারে।
  • "Submit" বোতামটিতে একটি onclick ইভেন্ট হ্যান্ডলার ব্যবহার করা হয়েছে, যা sendData() ফাংশন কল করবে এবং POST রিকোয়েস্ট পাঠাবে।
  • response-container নামে একটি <div> এলিমেন্ট রয়েছে, যেখানে POST রিকোয়েস্টের রেসপন্স দেখানো হবে।

JavaScript (app.js):

function sendData() {
    // ইনপুট ফিল্ড থেকে ডেটা সংগ্রহ করা
    var title = document.getElementById("title").value;
    var body = document.getElementById("body").value;

    // XMLHttpRequest অবজেক্ট তৈরি করা
    var xhr = new XMLHttpRequest();
    
    // POST রিকোয়েস্ট ওপেন করা
    xhr.open("POST", "https://jsonplaceholder.typicode.com/posts", true);
    
    // কনটেন্ট টাইপ সেট করা (JSON ডেটা পাঠানোর জন্য)
    xhr.setRequestHeader("Content-Type", "application/json");
    
    // রেসপন্স হ্যান্ডলিং সেট করা
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) { // রিকোয়েস্ট সম্পূর্ণ হয়েছে কিনা তা চেক করা
            if (xhr.status === 201) { // রিকোয়েস্ট সফল হয়েছে কিনা তা চেক করা (201 মানে রিসোর্স তৈরি হয়েছে)
                var responseData = JSON.parse(xhr.responseText); // JSON রেসপন্স প্রসেস করা
                document.getElementById("response-container").innerHTML = `
                    <h3>Response:</h3>
                    <p>ID: ${responseData.id}</p>
                    <p>Title: ${responseData.title}</p>
                    <p>Body: ${responseData.body}</p>
                `;
            } else {
                // যদি এরর হয়, তাহলে এরর মেসেজ দেখানো
                document.getElementById("response-container").innerHTML = "Error sending data!";
            }
        }
    };
    
    // JSON ডেটা তৈরি করা এবং রিকোয়েস্ট পাঠানো
    var data = JSON.stringify({ title: title, body: body });
    xhr.send(data);
}

বিস্তারিত ব্যাখ্যা:

১. ইনপুট ডেটা সংগ্রহ করা:

  • sendData() ফাংশনে ইনপুট ফিল্ড থেকে ডেটা সংগ্রহ করা হয়েছে (title এবং body)।

২. XMLHttpRequest অবজেক্ট তৈরি করা:

  • একটি XMLHttpRequest অবজেক্ট তৈরি করা হয়েছে, যা POST রিকোয়েস্ট পরিচালনা করবে।

৩. রিকোয়েস্ট ওপেন করা:

  • xhr.open("POST", "https://jsonplaceholder.typicode.com/posts", true); মেথড ব্যবহার করে একটি POST রিকোয়েস্ট সেটআপ করা হয়েছে।
  • "POST" মেথড ব্যবহার করা হয়েছে, কারণ আমরা সার্ভারে ডেটা পাঠাচ্ছি।
  • "https://jsonplaceholder.typicode.com/posts" URL যেখানে ডেটা পাঠানো হবে।
  • true মানে রিকোয়েস্টটি অ্যাসিনক্রোনাসভাবে চলবে।

৪. রিকোয়েস্ট হেডার সেট করা:

  • xhr.setRequestHeader("Content-Type", "application/json"); মেথড ব্যবহার করে রিকোয়েস্ট হেডার সেট করা হয়েছে, যাতে সার্ভার জানে আমরা JSON ডেটা পাঠাচ্ছি।

৫. রেসপন্স হ্যান্ডলিং:

  • xhr.onreadystatechange ইভেন্ট হ্যান্ডলার ব্যবহার করে চেক করা হয়েছে যে রিকোয়েস্ট সম্পূর্ণ হয়েছে কিনা (xhr.readyState === 4) এবং সফল হয়েছে কিনা (xhr.status === 201)।
  • 201 স্ট্যাটাস কোড নির্দেশ করে যে রিকোয়েস্ট সফল এবং সার্ভারে নতুন রিসোর্স তৈরি হয়েছে।
  • সফল হলে JSON ডেটা প্রসেস করে HTML ডকুমেন্টে (response-container ডিভে) আপডেট করা হয়েছে।
  • ব্যর্থ হলে একটি এরর মেসেজ দেখানো হয়েছে।

৬. রিকোয়েস্ট পাঠানো:

  • JSON ফরম্যাটে ডেটা তৈরি করা হয়েছে এবং xhr.send(data) মেথডের মাধ্যমে রিকোয়েস্টটি সার্ভারে পাঠানো হয়েছে।

সার্ভার রেসপন্স:

এই উদাহরণে, আমরা একটি ডেমো API (https://jsonplaceholder.typicode.com/posts) ব্যবহার করেছি, যা POST রিকোয়েস্টে নতুন রিসোর্স তৈরি করে। এটি সাধারণত নিচের মতো JSON রেসপন্স প্রদান করে:

{
    "id": 101,
    "title": "Sample Title",
    "body": "This is a sample body text."
}

প্রোগ্রামটি কীভাবে কাজ করে:

  1. ইউজার যখন "Submit" বোতামটি ক্লিক করে, তখন sendData() ফাংশন কল হয়।
  2. ফাংশনটি ইনপুট ফিল্ড থেকে ডেটা নিয়ে একটি POST রিকোয়েস্ট পাঠায় এবং সার্ভারে JSON ডেটা সাবমিট করে।
  3. রেসপন্স পাওয়ার পর, তা HTML পেজে ইনজেক্ট করা হয়, ফলে ইউজার নতুন রিসোর্স তৈরি হওয়ার ডেটা দেখতে পারে।

সারসংক্ষেপ:

  • POST রিকোয়েস্ট: Ajax POST রিকোয়েস্ট ব্যবহার করে ক্লায়েন্ট থেকে সার্ভারে ডেটা পাঠানো হয়, বিশেষ করে যখন ডেটা সাবমিশন বা রিসোর্স তৈরি করার প্রয়োজন হয়।
  • JSON ডেটা: POST রিকোয়েস্টে JSON ফরম্যাটে ডেটা পাঠানো হয়েছে এবং Content-Type হেডার সেট করা হয়েছে।
  • অ্যাসিনক্রোনাস অপারেশন: Ajax POST রিকোয়েস্ট অ্যাসিনক্রোনাসভাবে কাজ করে, ফলে পেজ প্রতিক্রিয়াশীল থাকে এবং রেসপন্স পাওয়ার পর HTML ডায়নামিকভাবে আপডেট হয়।
  • রেসপন্স হ্যান্ডলিং: readyState এবং status চেক করে POST রিকোয়েস্ট সফল হলে ডেটা প্রসেস এবং DOM আপডেট করা হয়।

এই ধাপগুলো অনুসরণ করে আপনি সহজেই Ajax POST রিকোয়েস্ট ব্যবহার করে সার্ভারে ডেটা পাঠাতে পারেন এবং আপনার ওয়েব পেজে ডায়নামিক কন্টেন্ট আপডেট করতে পারেন।

Ajax ব্যবহার করে সার্ভার রেসপন্স এবং ডেটা প্রসেসিং করা হলো একটি গুরুত্বপূর্ণ ধাপ, যেখানে সার্ভার থেকে প্রাপ্ত ডেটা (রেসপন্স) গ্রহণ করা হয় এবং সেটিকে ব্যবহার করে UI বা HTML DOM আপডেট করা হয়। Ajax রিকোয়েস্ট সম্পন্ন হলে XMLHttpRequest অবজেক্টের মাধ্যমে সার্ভার রেসপন্স হ্যান্ডল করা হয়। নিচে Server Response এবং Data Processing এর বিস্তারিত ব্যাখ্যা, উদাহরণ এবং ধাপগুলো তুলে ধরা হলো।

সার্ভার রেসপন্স এবং ডেটা প্রসেসিংয়ের ধাপ:

১. onreadystatechange ইভেন্ট হ্যান্ডলার:

  • Ajax রিকোয়েস্ট পাঠানোর পর, XMLHttpRequest অবজেক্টের onreadystatechange ইভেন্ট হ্যান্ডলার ব্যবহার করে রিকোয়েস্টের অবস্থা চেক করা হয়।
  • রিকোয়েস্ট সম্পূর্ণ হলে (readyState === 4), আমরা চেক করি যে রিকোয়েস্ট সফল হয়েছে কিনা (status === 200)।

২. JSON বা প্লেইন টেক্সট রেসপন্স প্রসেস করা:

  • সার্ভার থেকে প্রাপ্ত ডেটা JSON, XML, বা প্লেইন টেক্সট হতে পারে।
  • JSON ডেটা সাধারণত JSON.parse() মেথড দিয়ে JavaScript অবজেক্টে কনভার্ট করা হয়।
  • প্লেইন টেক্সট রেসপন্স সরাসরি ব্যবহার করা যেতে পারে।

৩. HTML DOM আপডেট করা:

  • প্রাপ্ত ডেটা প্রসেস করার পর, JavaScript এর মাধ্যমে HTML DOM আপডেট করা হয়। উদাহরণস্বরূপ, নতুন ডেটা HTML ডিভ বা তালিকায় যোগ করা হয়, অথবা কোনো টেবিল আপডেট করা হয়।

উদাহরণ: Server Response এবং Data Processing

নিচে একটি সম্পূর্ণ উদাহরণ দেওয়া হলো যেখানে সার্ভার থেকে JSON ডেটা প্রাপ্ত এবং তা প্রসেস করা হয়েছে:

HTML (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Server Response Example</title>
</head>
<body>
    <h1>Fetch and Display Data</h1>
    <button onclick="fetchData()">Fetch Data</button>
    <div id="data-container">
        <!-- সার্ভার থেকে প্রাপ্ত ডেটা এখানে দেখানো হবে -->
    </div>

    <script src="app.js"></script>
</body>
</html>

JavaScript (app.js):

function fetchData() {
    // XMLHttpRequest অবজেক্ট তৈরি করা
    var xhr = new XMLHttpRequest();
    
    // GET রিকোয়েস্ট ওপেন করা
    xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);
    
    // রেসপন্স হ্যান্ডলিং সেট করা
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) { // রিকোয়েস্ট সম্পূর্ণ হয়েছে কিনা তা চেক করা
            if (xhr.status === 200) { // রিকোয়েস্ট সফল হয়েছে কিনা তা চেক করা
                var data = JSON.parse(xhr.responseText); // JSON ডেটা প্রসেস করা
                
                // HTML ডকুমেন্টে ডেটা দেখানো
                document.getElementById("data-container").innerHTML = `
                    <h2>${data.title}</h2>
                    <p>${data.body}</p>
                `;
            } else {
                // যদি এরর হয়, তাহলে এরর মেসেজ দেখানো
                document.getElementById("data-container").innerHTML = "Error fetching data!";
            }
        }
    };
    
    // রিকোয়েস্ট পাঠানো
    xhr.send();
}

ব্যাখ্যা:

  ১. XMLHttpRequest অবজেক্ট তৈরি:

  • fetchData() ফাংশনে একটি XMLHttpRequest অবজেক্ট তৈরি করা হয়েছে, যা Ajax রিকোয়েস্ট পরিচালনা করবে।

  ২. রিকোয়েস্ট ওপেন করা:

  • xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true); মেথড ব্যবহার করে একটি GET রিকোয়েস্ট সেটআপ করা হয়েছে।

  ৩. রেসপন্স হ্যান্ডলিং:

  • xhr.onreadystatechange ইভেন্ট হ্যান্ডলার ব্যবহার করে চেক করা হয়েছে যে রিকোয়েস্ট সম্পূর্ণ হয়েছে কিনা (xhr.readyState === 4) এবং সফল হয়েছে কিনা (xhr.status === 200)।
  • সফল হলে JSON ডেটা JSON.parse() মেথড দিয়ে JavaScript অবজেক্টে কনভার্ট করা হয়েছে।
  • তারপর, HTML ডকুমেন্টের data-container ডিভে ডেটা আপডেট করা হয়েছে।

  ৪. এরর ম্যানেজমেন্ট:

  • যদি রিকোয়েস্ট ব্যর্থ হয়, তাহলে একটি এরর মেসেজ দেখানো হয়েছে।

৪. সার্ভার রেসপন্স উদাহরণ:

এই উদাহরণে, আমরা একটি JSONPlaceholder API ব্যবহার করেছি, যা নিচের মতো JSON ডেটা প্রদান করে:

{
    "userId": 1,
    "id": 1,
    "title": "Sample Title",
    "body": "This is a sample body text."
}

৫. JSON ডেটা প্রসেসিং এবং DOM আপডেট:

  • সার্ভার থেকে JSON ডেটা পাওয়ার পর, JSON.parse() দিয়ে তা JavaScript অবজেক্টে কনভার্ট করা হয়েছে।
  • তারপর, এই ডেটা HTML ডকুমেন্টের data-container ডিভে ইনজেক্ট করা হয়েছে, যাতে ইউজার পেজ রিলোড ছাড়াই ডেটা দেখতে পারে।

সারসংক্ষেপ:

  • সার্ভার রেসপন্স হ্যান্ডলিং: readyState এবং status চেক করে রিকোয়েস্ট সম্পূর্ণ এবং সফল হয়েছে কিনা যাচাই করা।
  • JSON বা টেক্সট রেসপন্স প্রসেসিং: প্রাপ্ত ডেটা JSON হলে JSON.parse() ব্যবহার করে JavaScript অবজেক্টে কনভার্ট করা এবং তা প্রসেস করা।
  • HTML DOM আপডেট করা: প্রাপ্ত ডেটা ব্যবহার করে HTML DOM ম্যানিপুলেট করা এবং ইউজার ইন্টারফেস আপডেট করা।

এই ধাপগুলো অনুসরণ করে Ajax এর মাধ্যমে সার্ভার থেকে ডেটা ফেচ করে সেটিকে প্রসেস করা এবং UI আপডেট করা সম্ভব। এটি ওয়েব অ্যাপ্লিকেশনকে ডায়নামিক এবং ইন্টারেক্টিভ করে তোলে।

উদাহরণ সহ GET এবং POST Request তৈরি

Ajax ব্যবহার করে GET এবং POST রিকোয়েস্ট তৈরি করা হয় সার্ভারের সাথে ডেটা আদান-প্রদান করার জন্য। GET রিকোয়েস্ট সাধারণত সার্ভার থেকে ডেটা ফেচ করার জন্য ব্যবহৃত হয়, আর POST রিকোয়েস্ট ব্যবহার করা হয় ক্লায়েন্ট থেকে সার্ভারে ডেটা সাবমিট করার জন্য। নিচে GET এবং POST রিকোয়েস্টের উদাহরণসহ বিস্তারিত আলোচনা করা হলো।

উদাহরণ ১: GET Request

GET রিকোয়েস্ট ব্যবহার করে আমরা সার্ভার থেকে ডেটা ফেচ করব এবং HTML ডকুমেন্টে তা দেখাবো।

HTML (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GET Request Example</title>
</head>
<body>
    <h1>Fetch Data Using GET Request</h1>
    <button onclick="fetchData()">Fetch Data</button>
    <div id="data-container">
        <!-- GET রিকোয়েস্টের মাধ্যমে প্রাপ্ত ডেটা এখানে দেখানো হবে -->
    </div>

    <script src="get-request.js"></script>
</body>
</html>

JavaScript (get-request.js):

function fetchData() {
    // XMLHttpRequest অবজেক্ট তৈরি করা
    var xhr = new XMLHttpRequest();
    
    // GET রিকোয়েস্ট ওপেন করা
    xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);
    
    // রেসপন্স হ্যান্ডলিং সেট করা
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) { // রিকোয়েস্ট সম্পূর্ণ এবং সফল হয়েছে কিনা তা চেক করা
            var data = JSON.parse(xhr.responseText); // JSON ডেটা প্রসেস করা
            document.getElementById("data-container").innerHTML = `
                <h2>${data.title}</h2>
                <p>${data.body}</p>
            `;
        } else if (xhr.readyState === 4) {
            // যদি রিকোয়েস্ট ব্যর্থ হয়, তাহলে এরর মেসেজ দেখানো
            document.getElementById("data-container").innerHTML = "Error fetching data!";
        }
    };
    
    // রিকোয়েস্ট পাঠানো
    xhr.send();
}

বিস্তারিত ব্যাখ্যা:

  1. XMLHttpRequest অবজেক্ট তৈরি করা: fetchData() ফাংশনে একটি XMLHttpRequest অবজেক্ট তৈরি করা হয়েছে।
  2. রিকোয়েস্ট ওপেন করা: xhr.open("GET", "URL", true) দিয়ে একটি GET রিকোয়েস্ট সেট করা হয়েছে।
  3. রেসপন্স হ্যান্ডলিং: onreadystatechange ইভেন্ট হ্যান্ডলার ব্যবহার করে রিকোয়েস্ট সফল হয়েছে কিনা চেক করা হয়েছে এবং সফল হলে JSON ডেটা HTML এ দেখানো হয়েছে।
  4. এরর হ্যান্ডলিং: যদি রিকোয়েস্ট ব্যর্থ হয়, তাহলে একটি এরর মেসেজ দেখানো হয়েছে।

উদাহরণ ২: POST Request

POST রিকোয়েস্ট ব্যবহার করে আমরা ক্লায়েন্ট থেকে ইনপুট ডেটা সার্ভারে পাঠাবো এবং সেই রেসপন্স HTML ডকুমেন্টে দেখাবো।

HTML (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>POST Request Example</title>
</head>
<body>
    <h1>Send Data Using POST Request</h1>
    <form id="data-form">
        <input type="text" id="title" placeholder="Title" required />
        <textarea id="body" placeholder="Body" required></textarea>
        <button type="button" onclick="sendData()">Submit</button>
    </form>
    <div id="response-container">
        <!-- POST রিকোয়েস্টের মাধ্যমে প্রাপ্ত রেসপন্স এখানে দেখানো হবে -->
    </div>

    <script src="post-request.js"></script>
</body>
</html>

JavaScript (post-request.js):

function sendData() {
    // ইনপুট ফিল্ড থেকে ডেটা সংগ্রহ করা
    var title = document.getElementById("title").value;
    var body = document.getElementById("body").value;

    // XMLHttpRequest অবজেক্ট তৈরি করা
    var xhr = new XMLHttpRequest();
    
    // POST রিকোয়েস্ট ওপেন করা
    xhr.open("POST", "https://jsonplaceholder.typicode.com/posts", true);
    
    // কনটেন্ট টাইপ সেট করা (JSON ডেটা পাঠানোর জন্য)
    xhr.setRequestHeader("Content-Type", "application/json");
    
    // রেসপন্স হ্যান্ডলিং সেট করা
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 201) { // রিকোয়েস্ট সফল হয়েছে কিনা তা চেক করা
            var responseData = JSON.parse(xhr.responseText); // JSON রেসপন্স প্রসেস করা
            document.getElementById("response-container").innerHTML = `
                <h3>Response:</h3>
                <p>ID: ${responseData.id}</p>
                <p>Title: ${responseData.title}</p>
                <p>Body: ${responseData.body}</p>
            `;
        } else if (xhr.readyState === 4) {
            // যদি এরর হয়, তাহলে এরর মেসেজ দেখানো
            document.getElementById("response-container").innerHTML = "Error sending data!";
        }
    };
    
    // JSON ডেটা তৈরি করা এবং রিকোয়েস্ট পাঠানো
    var data = JSON.stringify({ title: title, body: body });
    xhr.send(data);
}

বিস্তারিত ব্যাখ্যা:

  1. ইনপুট ডেটা সংগ্রহ করা: ইউজারের ইনপুট ডেটা সংগ্রহ করে একটি JSON অবজেক্ট তৈরি করা হয়েছে।
  2. XMLHttpRequest অবজেক্ট তৈরি করা: POST রিকোয়েস্ট পাঠানোর জন্য একটি XMLHttpRequest অবজেক্ট তৈরি করা হয়েছে।
  3. রিকোয়েস্ট ওপেন করা: xhr.open("POST", "URL", true) দিয়ে POST রিকোয়েস্ট সেট করা হয়েছে।
  4. কনটেন্ট টাইপ সেট করা: xhr.setRequestHeader("Content-Type", "application/json") দিয়ে রিকোয়েস্টের কনটেন্ট টাইপ সেট করা হয়েছে।
  5. রেসপন্স হ্যান্ডলিং: রিকোয়েস্ট সফল হলে JSON রেসপন্স প্রসেস করা হয়েছে এবং HTML এ দেখানো হয়েছে।
  6. এরর হ্যান্ডলিং: যদি রিকোয়েস্ট ব্যর্থ হয়, তাহলে একটি এরর মেসেজ দেখানো হয়েছে।

সারসংক্ষেপ:

  • GET Request: সার্ভার থেকে ডেটা ফেচ করার জন্য ব্যবহৃত হয়। এটি সাধারণত ডেটা রিড করার জন্য ব্যবহৃত হয়।
  • POST Request: ক্লায়েন্ট থেকে ডেটা সার্ভারে পাঠানোর জন্য ব্যবহৃত হয়। এটি সাধারণত ডেটা সাবমিশন বা রিসোর্স তৈরি করার জন্য ব্যবহৃত হয়।

এই উদাহরণগুলো অনুসরণ করে GET এবং POST রিকোয়েস্টের মাধ্যমে কিভাবে Ajax ব্যবহার করে ডেটা আদান-প্রদান করা যায় তা সহজে বোঝা যায়।

Promotion